<template>
  <div style="display: flex;">
    <!--   				<el-date-picker v-model="startTime1" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="开始日期"  :picker-options="pickerOptions0">-->
    <!--   				</el-date-picker><span style="padding: 0 5px;">至</span>-->
    <!--   				<el-date-picker v-model="endTime1" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束日期"  :picker-options="pickerOptions1">-->
    <!--   				</el-date-picker>-->

    <!--   修改与2021.5.24 yadong   -->
    <el-date-picker
      v-model="times"
      type="datetimerange"
      range-separator="至"
      value-format="yyyy-MM-dd HH:mm:ss"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right"
      @change="dateChange"
    >
    </el-date-picker>
  </div>
</template>
<script>
export default {
  props: {
    times: {
      type: Array | String
    }
    // startTime: {
    //   type: String
    // },
    // endTime: {
    //   type: String
    // }
  },
  watch: {
    startTime (val) {
      this.startTime1 = val
    },
    endTime (val) {
      this.endTime1 = val
    },
    startTime1 (val) {
      if (val == null) {
        this.startTime1 = ''
        this.$emit('getTime', {startTime: this.startTime1, endTime: this.endTime1})
        return
      }
      this.startTime1 = val
      this.$emit('getTime', {startTime: this.startTime1, endTime: this.endTime1})
    },
    endTime1 (val) {
      if (val == null) {
        this.endTime1 = ''
        this.$emit('getTime', {startTime: this.startTime1, endTime: this.endTime1})
        return
      }
      this.endTime1 = val
      this.$emit('getTime', {startTime: this.startTime1, endTime: this.endTime1})
    }
  },
  data () {
    return {
      pickerOptions: { // 时间选项
        shortcuts: [{
          text: '近7日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '近15日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '近30日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    dateChange (e) {
      console.log(e)
      this.$emit('getTime', e)
    }
  }

}
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  //width: 198px !important;
}
</style>
